<template>
    <div class="gooleVerify">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
            <div class="textColor" @click="$router.push('/finish')">{{ $t('跳过') }}</div>
        </div>
        <Step :step="3"></Step>
        <div class="title textColor">{{ $t('安全绑定') }}</div>
        <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
            <div class="imgbox">
                <canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
                <img :src="google_auth_url" alt="" v-show="imgshow" class="QRcodeImg" />
            </div>
            <div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
                <img src="@/assets/image/reload.png" @click="getGoogleauth" alt="" />
            </div>
            <p class="tips">{{ $t('(请妥善备份密钥以防丢失)') }}</p>
            <div class="copy textColor" @click="copy">{{ $t('复制') }}</div>
        </div>
        <div class="flex justify-between mt-48 mb-20">
            <div class="textColor">{{ $t('谷歌验证码') }}</div>
            <div class="flex items-center">
                <div class="textColor4" @click="value = ''">{{ $t('清除') }}</div>
                <div class="textColor4 ml-30" @click="pastCont">{{ $t('粘贴') }}</div>
            </div>
        </div>
        <van-password-input :value="value" :gutter="16" :focused="showKeyboard" @focus="showKeyboard = true"
            :mask="false" />
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
        <div class="mt-20"></div>
        <div class="mt-44 bottom tabBackground textColor">
            <p>{{ $t('注意事项') }}</p>
            <p>{{ $t('1.下载Google身份验证器APP') }}</p>
            <p>{{ $t('2.扫描上图二维码输入验证码完成绑定') }}</p>
        </div>
        <div class="btn btnMain" @click="submit">{{ $t('确定') }}</div>
    </div>
</template>

<script>
import Step from "./step.vue";
import { PasswordInput, NumberKeyboard } from 'vant';
import Axios from "@/API/userCenter.js";

    export default {
        props: {
            
        },
        components: {
            Step,
            [PasswordInput.name]: PasswordInput,
            [NumberKeyboard.name]: NumberKeyboard,
        },
        data(){
            return {
                google_auth_secret: '',
                imgshow:true,
                google_auth_url:'',
                value:'',
                showKeyboard:false   
            }
        },
        mounted(){
            this.getGoogleauth();
        },
        methods: {
            copy(){
                this.$copyText(this.google_auth_secret).then(message => {
                    this.$toast(this.$t('复制成功'));
                }).catch(err => {

                })
            },
            getGoogleauth() {
                Axios.getGoogleauth({
                }).then((res) => {
                    this.google_auth_secret = res.data.google_auth_secret;
                    this.google_auth_url = res.data.google_auth_url
                    console.log(res)
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
                });
            },
            bindGoogleauth() {
                
                Axios.bindGoogleauth({
                    secret: this.google_auth_secret,
                    code: this.value
                }).then((res) => {
                    let google_auth_bind = res.data.google_auth_bind;
                    if (google_auth_bind) {
                        this.$toast(this.$t('绑定成功'));
                        this.$router.push('/finish')
                    } else {
                        this.$toast(this.$t('绑定失败'));
                    }
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}   
                });
                

            },
            submit(){
                if(this.value.length<6){
                    this.$toast(this.$t('请输入验证码'));
                    return false
                }
                this.bindGoogleauth()
            },
            async pastCont() {
                this.value = await navigator.clipboard.readText();
            }
        },
        watch: {
            value(value) {
                if (value.length === 6) {
                    this.showKeyboard = false
                } 
            },
        },
    }
</script>

<style lang="scss" scoped>
.gooleVerify{
    padding: 32px;
    padding-bottom: 108px;
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
}
.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}

.stepBox {
    padding: 0 30px;
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 52px;
}
.imgbox{
    border: 1px solid $line_color;
    padding: 30px;
    width: 364px;
    height: 364px;
    box-sizing: border-box;
    img{
        width: 100%;
        height: 100%;
    }
}
.code{
    font-size: 30px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 44px;
    height: 36px;
    img{
        width: 26px;
        height: 26px;
        margin-left: 10px;
    }
}
.tips{
    margin-top: 20px;
    color: #999999;
}
.copy{
    border-radius: 8px;
    width: 264px;
    height: 80px;
    margin-top: 32px;
    border: 2px solid $line_color;
    line-height: 80px;
}
.bottom{
    padding: 40px 32px 14px 32px;
    p{
        padding-bottom: 26px;
    }
}
.btn {
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
}
.van-password-input{
    margin: 0;
}
.van-password-input__security li{
    background: $tab_background;
    width: 100px;
    height: 100px;
    color: $text_color;
}
</style>